<template>
	<view class="bg">
		<xl-navbar title="Search搜索框" fixed shadow></xl-navbar>
		<view class="title">基础样式</view>
		<xl-search></xl-search>
		
		<view class="title">设置宽高边距、背景色、矩形搜索框、边框颜色</view>
		<xl-search width="500rpx" height="70rpx" margin="10rpx 30rpx" shape="square" background="#fff" borderColor="#888"></xl-search>
		
		<view class="title">搜索框左侧文本，右侧搜索按钮</view>
		<xl-search v-model="keywords" label="商品" showAction></xl-search>
		
		<view class="title">获取焦点动画展示右侧按钮，修改操作文本</view>
		<xl-search v-model="keywords" showAction animation actionText="查询"></xl-search>
		
		<view class="title">右侧按钮使用图标</view>
		<xl-search v-model="keywords" showAction actionIcon="xl-scan"></xl-search>
		
		<view class="title">修改搜索图标</view>
		<xl-search v-model="keywords" searchIcon="xl-scan" searchIconSize="18" searchIconColor="#888"></xl-search>
		
		<view class="title">输入框内容对齐方式：left、center、right</view>
		<xl-search v-model="keywords" inputAlign="center"></xl-search>
		
		<view class="title">左侧文本</view>
		<xl-search v-model="keywords" leftText="福州" showAction actionIcon="xl-scan" @clickLeft="chooseCity" @clickAction="clickAction"></xl-search>
		
		<view class="title">禁用、触发点击跳转页面</view>
		<xl-search disabled @click="clickSearch"></xl-search>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const keywords = ref("")
	
	function clickSearch(){
		uni.$xl.toast("点击跳至搜索页面")
	}
	function chooseCity(){
		uni.$xl.toast("点击城市选择")
	}
	function clickAction(){
		uni.$xl.toast("点击Action操作")
	}
</script>
